<template>
  <div class="container">
    <!-- 手机品牌 -->
    <van-field
      v-model="backParam.phoneBrands"
      readonly
      is-link
      input-align="right"
      label="手机品牌"
      placeholder="请选择"
      @focus="phoneTypeShow = true;"
    />
    <div class="height10"></div>

    <!-- 操作系统 -->
    <van-field
      v-model="backParam.phonesSystem"
      readonly
      is-link
      input-align="right"
      label="操作系统"
      placeholder="请选择"
      @focus="systemTypeShow = true;"
    />
    <div class="height10"></div>

    <!-- 通讯服务商 -->
    <van-field
      v-model="backParam.phoneOperators"
      readonly
      is-link
      input-align="right"
      label="通讯服务商"
      placeholder="请选择"
      @focus="operatorsTypeShow = true;"
    />
    <div class="height10"></div>

    <!--显示位置-->
    <van-field
      v-model="backParam.nowLocation"
      label="显示位置"
      input-align="right"
      placeholder="请输入当前显示的位置"
    />
    <div class="height10"></div>

    <!-- 上传附件 -->
    <div style="background-color: #fff;">
      <file-upload ref="file" @getFileList="getFileList"></file-upload>
    </div>
    <div class="height10"></div>

    <van-field
      v-model="backParam.remarks"
      rows="3"
      :autosize="{maxHeight: '100px'}"
      label="备注"
      type="textarea"
      placeholder="请输入描述信息"
    />

    <!-- 提交，保存 -->
    <div class="pagefootbtn">
      <van-button
        type="primary"
        :disabled="disableSubmit2"
        v-cloak
        @click="saveData"
        ref="submit"
      >提交
      </van-button>
    </div>





    <!-- 选择手机品牌弹出层 -->
    <van-popup v-model="phoneTypeShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="phoneType"
        @confirm="selectPhoneType"
        @cancel="phoneTypeShow = false"
        confirm-button-text="确定"
        cancel-button-text="取消"
      />
    </van-popup>

    <!-- 选择操作系统弹出层 -->
    <van-popup v-model="systemTypeShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="systemTypes"
        @confirm="selectSystemType"
        @cancel="systemTypeShow = false"
        confirm-button-text="确定"
        cancel-button-text="取消"
      />
    </van-popup>

    <!-- 选择通讯服务商弹出层 -->
    <van-popup v-model="operatorsTypeShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="operatorsTypes"
        @confirm="selectOperatorsType"
        @cancel="operatorsTypeShow = false"
        confirm-button-text="确定"
        cancel-button-text="取消"
      />
    </van-popup>
  </div>
</template>
<script>
  import fileUpload from '@/component/fileUploadHy';
  import mapSetApi from "@/api/mapSet";
  import axios from 'axios'
  import cfg from "@/config/config";
  export default {
    components: {
      [fileUpload.name]: fileUpload
    },
    data() {
      return {
        //选择手机品牌
        phoneTypeShow: false,
        phoneType: [
          { id: "1", text: "苹果" },
          { id: "2", text: "小米" },
          { id: "3", text: "华为" },
          { id: "4", text: "荣耀" },
          { id: "5", text: "OPPO" },
          { id: "6", text: "VIVO" },
          { id: "7", text: "真我" },
          { id: "8", text: "一加" },
          { id: "9", text: "三星"},
          { id: "10", text: "魅族" },
          { id: "11", text: "黑鲨" },
          { id: "12", text: "索尼" },
          { id: "13", text: "努比亚" },
          { id: "14", text: "IQOO" },
          { id: "15", text: "诺基亚" },
          { id: "16", text: "联想" },
          { id: "17", text: "摩托罗拉" },
          { id: "18", text: "天语" },
          { id: "19", text: "中兴" },
          { id: "20", text: "锤子" },
          { id: "21", text: "朵唯" },
          { id: "22", text: "小辣椒" },
          { id: "23", text: "其他" },
        ],
        //选择操作系统
        systemTypeShow: false,
        systemTypes: [
          { id: "1", text: "Android" },
          { id: "2", text: "IOS" },
          { id: "3", text: "Harmony" },
          { id: "4", text: "Windows phone" },
          { id: "5", text: "Symbian" },
          { id: "6", text: "BlackBerry OS" },
          { id: "7", text: "其他" },
        ],
        //选择通讯服务商
        operatorsTypeShow: false,
        operatorsTypes: [
          { id: "1", text: "中国移动" },
          { id: "2", text: "中国联通" },
          { id: "3", text: "中国电信" },
          { id: "4", text: "其他" },
        ],
        fileList: [],     //上传的照片
        disableSubmit: true,   //按钮是否禁止点击
        backParam:{
          phoneBrands:"",  //手机品牌
          phonesSystem:"",  //操作系统类型
          phoneOperators:"",  //通讯服务商
          nowLocation:"",  //显示位置
          remarks:"",  //备注
          longitude: 0,  //经度
          latitude: 0   //纬度
        },
        userNo:""
      }
    },
    watch:{

    },
    computed:{
      disableSubmit2: function ()  {
        // 此处条件要添加 ,测试时没有添加，现在上传接口不通
        if (this.backParam.phoneBrands != "" && this.backParam.phonesSystem != "" && this.backParam.phoneOperators != "" && this.backParam.nowLocation != "" && this.backParam.remarks != "" && this.fileList != 0){
          return false;
        } else {
          return true;
        }
      }

    },
    mounted() {
      console.log(this.$route.query)
      if(this.$store.state.user && this.$store.state.user.USERNO){
        this.userNo = this.$store.state.user.USERNO;
      }
      if (this.$route.query.longitude) {
        this.backParam.longitude = this.$route.query.longitude;
        this.backParam.latitude = this.$route.query.latitude;
        this.backParam.nowLocation = this.$route.query.address;
      }

    },
    destroyed(){
      this.$toast.clear();
    },
    methods: {
      getFileList(value){
        console.log(value);
        this.fileList = value;
      },
      // 选择手机品牌
      selectPhoneType(item) {
        this.backParam.phoneBrands = item.text;
        this.phoneTypeShow = false;
      },
      // 选择操作系统
      selectSystemType(item) {
        this.backParam.phonesSystem = item.text;
        this.systemTypeShow = false;
      },
      // 选择通讯服务商
      selectOperatorsType(item) {
        this.backParam.phoneOperators = item.text;
        this.operatorsTypeShow = false;
      },

      // 保存，提交
      async saveData() {
        let paramFormDataAll = this.$refs.file.formDataAll;
        // console.log(this.$refs.file.fileList);
        // if (this.$refs.file.fileList == 0){
        //   this.$toast("请上传当前位置拍照图片");
        //   return
        // }

        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          duration: 0,
          message: "正在提交...",
        });

        // let param = {
        //     phoneBrands: this.backParam.phoneBrands,  //手机品牌
        //     phonesSystem: this.backParam.phonesSystem,  //操作系统类型
        //     phoneOperators: this.backParam.phoneOperators,  //通讯服务商
        //     nowLocation: this.backParam.nowLocation,  //显示位置
        //     remarks: this.backParam.remarks,  //备注
        //     longitude: this.$route.query.longitude,
        //     latitude: this.$route.query.latitude,
        //     fileList: this.$refs.file.formDataAll  //上传文件数据流; 如果是提交数据流，应该是fileList
        // };
        // let resp = await mapSetApi.insertBdKqFeedback(this.formDataAll);

        paramFormDataAll.set("phoneBrands", this.backParam.phoneBrands);   //手机品牌
        paramFormDataAll.set("phonesSystem", this.backParam.phonesSystem);   //操作系统类型
        paramFormDataAll.set("phoneOperators", this.backParam.phoneOperators);   //通讯服务商
        paramFormDataAll.set("nowLocation", this.backParam.nowLocation);   //显示位置
        paramFormDataAll.set("remarks", this.backParam.remarks);     //备注
        paramFormDataAll.set("longitude", this.backParam.longitude);     //经度
        paramFormDataAll.set("latitude", this.backParam.latitude);      //纬度
        paramFormDataAll.set("userId", this.userNo);      //工号 this.userNo  ；  测试：75290
        let headers = {
          'Content-Type': 'multipart/form-data'
        }
        axios.post(cfg.apiUrl + "api/stDevice/insertBdKqFeedback", paramFormDataAll, {headers: headers}).then(resp=>{
          console.log(resp);
          this.$toast.clear();
          if (resp.data.success) {
            this.$toast.success("提交成功！");
            // 重置各种选项
            this.backParam.phoneBrands="";
            this.backParam.phonesSystem="";
            this.backParam.phoneOperators="";
            this.backParam.remarks="";
            this.$refs.file.fileList = [];
          }else{
            this.$toast.fail(resp.data.message);
          }

        }) .catch(function (error) {
          console.log(error);
          this.$toast.success(error);
        });

      }
    },
  }
</script>
<style>
  .container {
    /*padding-bottom: 65px;*/
    background-color: #f9f9f9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
